<template>
  <view class="index-content">
    <!-- 轮播图 -->
    <!-- <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot> -->
    
    <view class="banner-content">
      <image src="../../static/images/index/index-banner.jpg" mode="widthFix" />
    </view>
    <view class="service-content">
      <view>
        <table>
          <tr v-for="(service, index) in serviceList" :key="index">
            <td v-for="item in service" :key="item.type">
              <view @click="serviceEvent(item)">
                <view class="icon-content">
                  <uni-icons :type="item.icon" size="50"></uni-icons>
                  <view class="num" v-if="item.num > 0">{{ item.num > 99 ? '99+' : item.num }}</view>
                </view>
                <text class="text">{{item.name}}</text>
              </view>
            </td>
          </tr>
        </table>
      </view>
    </view>
    
    <!-- 宫格组件 -->
    <!--<uni-section title="系统管理" type="line"></uni-section>-->
    <!--<view class="grid-body">-->
    <!--<uni-grid :column="4" :showBorder="false" @change="changeGrid">-->
    <!--<uni-grid-item v-for="(item, index) in functionList" :index="index" :key="index">-->
    <!--<view class="grid-item-box">-->
    <!--<uni-icons :type="item.icon" size="30"></uni-icons>-->
    <!--<text class="text">{{item.name}}</text>-->
    <!--</view>-->
    <!--</uni-grid-item>-->
    <!-- <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="staff-filled" size="30"></uni-icons>
        <text class="text">角色管理</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="color" size="30"></uni-icons>
        <text class="text">菜单管理</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="settings-filled" size="30"></uni-icons>
        <text class="text">部门管理</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="heart-filled" size="30"></uni-icons>
        <text class="text">岗位管理</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="bars" size="30"></uni-icons>
        <text class="text">字典管理</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="gear-filled" size="30"></uni-icons>
        <text class="text">参数设置</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="chat-filled" size="30"></uni-icons>
        <text class="text">通知公告</text>
      </view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-item-box">
        <uni-icons type="wallet-filled" size="30"></uni-icons>
        <text class="text">日志管理</text>
      </view>
    </uni-grid-item> -->
    <!--</uni-grid>-->
    <!--</view>-->
  </view>
</template>

<script>
  import wx from 'weixin-js-sdk';
  
  import {
    showConfirm,
    getUrlParam,
  } from '@/utils/common';
  import {
    getEquipmentInfo,
    repairUncompleted,
  } from '../../api/device/device.js';
  
  export default {
    components: {},
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [ {
          image: '/static/images/banner/banner01.jpg',
        },
          {
            image: '/static/images/banner/banner02.jpg',
          },
          {
            image: '/static/images/banner/banner03.jpg',
          },
        ],
        functionList: [
          // 巡检，保养，计量
          {
            name: '设备查询',
            icon: 'scan',
            code: 'scan',
          },
          {
            name: '维修工单',
            icon: 'list',
            type: 'repair',
            path: '/pages/order/order-list/repair-order-list/repair-order-list',
            num: 0,
          },
          // {
          //   name: '巡检工单',
          //   icon: 'list',
          //   type: 'check',
          //   path: '/pages/order/order-list/check-order-list/check-order-list',
          // },
          {
            name: '保养巡检',
            icon: 'list',
            type: 'stand',
            path: '/pages/order/order-list/stand-order-list/stand-order-list',
            num: 0,
          },
          {
            name: '计量工单',
            icon: 'list',
            type: 'measure',
            path: '/pages/order/order-list/measure-order-list/measure-order-list',
            num: 0,
          },
        ],
      };
    },
    computed: {
      serviceList() {
        const { functionList } = this;
        const num = Math.ceil(functionList.length / 2);
        const dataList = [];
        for (let i = 0; i < num; i += 1) {
          const arr = functionList.slice(i * 2, i * 2 + 2);
          dataList.push(arr);
        }
        return dataList;
      },
    },
    methods: {
      async getOrderNum() {
        const { functionList } = this;
        const res = await repairUncompleted();
        if (res.code === 200 && res.data) {
          const { data } = res;
          functionList.forEach((val) => {
            if (val.type === 'repair') {
              val.num = data.repair || 0;
            }
            if (val.type === 'stand') {
              val.num = data.maintenance || 0;
            }
            if (val.type === 'measure') {
              val.num = data.measure || 0;
            }
          });
        }
        this.functionList = functionList;
      },
      clickBannerItem(item) {
        console.info(item);
      },
      changeSwiper(e) {
        this.current = e.detail.current;
      },
      serviceEvent(item) {
        const that = this;
        if (item.code === 'scan') {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: [ 'qrCode' ], // 可以指定扫二维码还是一维码，默认二者都有
            success(res) {
              if (res.resultStr) {
                const resultParam = getUrlParam(res.resultStr);
                const eqCode = resultParam.eqCode || res.resultStr;
                that.getDeviceInfo(eqCode);
              }
            },
            fail(response) {
              this.$modal.showToast('扫码失败~');
            },
          });
          return;
        }
        uni.navigateTo({
          url: item.path,
        });
      },
      async getDeviceInfo(eqCode) {
        const res = await getEquipmentInfo({
          eqCode,
        });
        if (res.code === 200) {
          uni.navigateTo({
            url: `/pages/device-detail/deviceDetail?eqCode=${eqCode}`,
          });
          return;
        }
        uni.showModal({
          title: '提示',
          content: res.msg || '查询失败',
          showCancel: false,
          success(res) {
          },
        });
      },
      changeGrid(e) {
        const {
          index,
        } = e.detail;
        const item = this.functionList[ index ];
        if (item.code === 'scan') {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: [ 'qrCode' ], // 可以指定扫二维码还是一维码，默认二者都有
            success(res) {
              if (res.resultStr) {
                uni.navigateTo({
                  url: `/pages/device-detail/deviceDetail?eqCode=${res.resultStr}`,
                });
              }
            },
            fail(response) {
              this.$modal.showToast('扫码失败~');
            },
          });
          return;
        }
        uni.navigateTo({
          url: item.path,
        });
      },
    },
    onShow() {
      this.getOrderNum();
    },
  };
</script>

<style lang="scss" scoped>
  .index-content {
    &, * {
      box-sizing: border-box;
    }
    .banner-content {
      image {
        display: block;
        width: 100%;
      }
    }
    .service-content {
      padding: 5px 15px;
      > view {
        margin: 0 -5px;
        table {
          width: 100%;
          border-collapse: collapse;
          tr {
            td {
              padding: 10px 5px;
              > view {
                height: calc((100vw - 50px) / 2);
                text-align: center;
                color: white;
                background-color: #4ba8ed;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .icon-content {
                  position: relative;
                  .num {
                    position: absolute;
                    top: -5px;
                    right: 0;
                    transform: translateX(10px);
                    background-color: red;
                    color: white;
                    font-size: 12px;
                    text-align: center;
                    width: 30px;
                    height: 25px;
                    line-height: 25px;
                    border-radius: 50%;
                  }
                }
                .uni-icons {
                  color: white !important;
                }
                .text {
                  display: block;
                  margin-top: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }
  
  view {
    font-size: 14px;
    line-height: inherit;
  }
  
  /* #endif */
  
  .text {
    text-align: center;
    font-size: 26 rpx;
    margin-top: 10 rpx;
  }
  
  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }
  
  .uni-margin-wrap {
    width: 690 rpx;
    width: 100%;;
  }
  
  .swiper {
    height: 300 rpx;
  }
  
  .swiper-box {
    height: 150px;
  }
  
  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300 rpx;
    line-height: 300 rpx;
  }
  
  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }
    
    .image {
      width: 100%;
    }
  }
</style>
